<template>
	<div class="home" id="left-table" v-if="form_display">
		<div class="button-row">
			<div class="turnover-wrap">
				<el-button size="mini" type="warning" @click="saveImg">保存图片</el-button>
			</div>
		</div>
		<DailySummary v-if="display" :todayDate="todayDate" :reportData="reportData"></DailySummary>
		<DailyYearChart v-if="display" :todayDate="todayDate" :reportData="reportData"></DailyYearChart>
		<div>注：数据截止至{{parseInt(todayDate.substring(5, 7))}}月{{parseInt(todayDate.substring(8, 10))}}日</div>
		<div v-if="!display" style="text-align: center;">
			请点击生成日报按钮，生成{{todayDate}}场外业务日报
		</div>
		<!-- // 弹出图片 -->
		<div>
			<el-dialog :visible.sync="isDialogVisible" width="590px" center>
				<!-- // 图片显示id -->
				<div id="imgIdLeft"></div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import DailySummary from "../components/DailySummary.vue";
	import DailyYearChart from "../components/DailyYearChart.vue";
	import html2canvas from "html2canvas";
	import {
		getReportData
	} from "@/api/api";

	export default {
		name: "DailyTableView",
		data() {
			return {
				isDialogVisible: false, // 图片窗口是否显示标志位
				searchDate: "",
				reportData: null,
				display: false,
				form_display: false,
			}
		},
		props: {
			todayDate: {
				type: String,
				default () {
					return "";
				},
			}
		},
		components: {
			DailySummary,
			DailyYearChart,
			html2canvas,
		},
		mounted() {
			this.searchDate = this.todayDate.substring(0, 4) + this.todayDate.substring(5, 7) + this.todayDate.substring(8, 10)
			this.form_display = true;
			this.requestApi(this.searchDate)
		},
		watch: {
			todayDate: {
				handler(newVal, oldVal) {
					this.searchDate = this.todayDate.substring(0, 4) + this.todayDate.substring(5, 7) + this.todayDate.substring(8, 10)
					this.display = false;
					this.requestApi(this.searchDate)
				}
			}
		},
		methods: {
			saveImg() {
				console.log("保存照片@@@");
				// 打开Dialog窗口
				this.isDialogVisible = true;

				html2canvas(document.querySelector("#left-table")).then((canvas) => {
					var firstChild = document.getElementById("imgIdLeft").firstChild;

					if (firstChild == null) {
						document.getElementById("imgIdLeft").appendChild(canvas);
					} else {
						document.getElementById("imgIdLeft").replaceChild(canvas, firstChild);
					}

				});
			},
			// 查询按钮 点击 事件
			submitBtn() {
				// 调用带参数接口
				this.requestApi(this.searchDate);
			},
			// 请求数据API
			requestApi(searchDate) {
				getReportData(searchDate).then((res) => {
					// 如果 status = 500 // 不显示表格 并提示
					if (
						res.data.status === 100 ||
						res.data.Status === 100 ||
						res.status === 404 ||
						res.status === 500
					) {
						// 不显示表格,显示提示页面
						this.display = false;
						return;
					}
					if (res.status === 200) {
						// 显示表格,不显示提示页面
						this.display = true;
						this.form_display = true;
						this.reportData = JSON.parse(res.data.replace(/\bNaN|Infinity\b/g, "null"));
						this.reportData.daily_detail.wbill_num = 0;
						this.reportData.daily_detail.basis_num = 0;
						for(var i in this.reportData.daily_detail.index){
							var d = this.reportData.daily_detail.index[i]
							if(d[0] == 'wbill'){
								this.reportData.daily_detail.wbill_num += 1;
							}
							if(d[0] == 'basis'){
								this.reportData.daily_detail.basis_num += 1;
							}
						}
						console.log(this.reportData);
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.home {
		width: 500px;
		padding: 10px;
		border: 1px solid #d5d5d7;
	}

	.button-row {
		position: absolute;
		top: 120px;
	}
	
	.turnover-wrap {
		display: flex;
		margin-bottom: 10px;
		
	
		.swap-turnover {
			width: 200px;
			min-width: 190px;
			margin-right: 10px;
		}
		
		.opt-turnover {
			width: 200px;
			min-width: 190px;
			margin-right: 10px;
		}
	}
</style>